<template>
  <div class="jihua_first" id="jihua_first">
    <div class="jihua_first_left">
      <p>{{info.name}}</p>
      <span class="shijian">课时：{{info.week}}周</span><span class="shijian">天/周：{{info.day_everyweek}}天</span><span
      class="shijian">强度：{{info.grade_level}}</span>
    </div>
    <div class="jihua_first_right">
      <el-button class="addjihua" id="addjihua" type="button" @click="open">{{buttonvalue}}</el-button>
    </div>
  </div>
</template>

<script>
  export default {
    name: "DetailInfo",
    data() {
      return {
        buttonvalue: "+加入训练计划",
        info: ""
      }
    },
    created() {
      //获取计划介绍
      var this_ = this

      this_.$axios.get('http://127.0.0.1:8080/traning/jihua_jieshao', {
        params: {
          id: this_.$store.state.click_index_planid
        }
      })
        .then(function (response) {
          if (response) {
            this_.info = response.data[0];

            console.log(this_.info);
          }
        })
      //判断是否已经加入训练计划
      if (localStorage.getItem('token')) {
        this_.$axios.get('http://127.0.0.1:8080/traning/check_jihua', {
          params: {
            jihua_id: this_.$store.state.click_index_planid,
            id: localStorage.getItem("id"),
          }
        }).then(function (response) {
          if (response.data.code == '1050') {

            console.log(this_.$store.state.user_traning_id, "sss")
            this_.buttonvalue = "取消训练计划"


          } else {
            this_.buttonvalue = "+加入训练计划"
          }
        })
      } else {

      }
    },
    methods: {
      open() {
        var this_ = this
        if (localStorage.getItem('token')) {
          if (this_.buttonvalue == '取消训练计划') {
            this.$confirm('此操作将删除你在该计划的记录, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this_.$axios.get('http://127.0.0.1:8080/traning/delete_jihua', {
                params: {
                  jihua_id: this.$store.state.click_index_planid,
                  id: localStorage.getItem("id"),
                }
              }).then(function (response) {
                if (response.data.code == '1051') {
                  console.log(response.data)
                  this_.$store.state.user_traning_id = ''

                  this_.$router.push("/blank")


                } else {
                  this_.buttonvalue = "取消训练计划"
                }
              })
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });
            });

          } else {
            this_.$axios.get('http://127.0.0.1:8080/traning/add_jihua', {
              params: {
                jihua_id: this.$store.state.click_index_planid,
                id: localStorage.getItem("id"),
              }
            }).then(function (response) {
              if (response.data.code == '1004') {
                console.log(response.data)
                this_.buttonvalue = "取消训练计划"
                this_.$store.state.user_traning_id = ''
                this_.$store.state.richeng_finish = ''
                this_.$alert('加入计划成功！', '', {
                  confirmButtonText: '确定',
                });
              } else {
                this_.buttonvalue = "+加入训练计划"
              }
            })

          }
        } else {
          this.$alert('请宁先登录！', '', {
            confirmButtonText: '确定',
          });
        }
      },


    }
  }
</script>

<style scoped>
  .jihua_first {
    overflow: hidden;
    border-bottom: solid 1px rgba(0, 0, 0, 0.07);
  }

  .jihua_first_left {
    margin-top: 20px;
    margin-left: 20px;
    width: 600px;
    float: left;
  }

  .jihua_first_right {
    height: 87.6px;
    width: 300px;
    line-height: 87.6px;
    float: right;
    margin-left: 30px;
  }

  .jihua_first_right .el-button {

  }

  .jihua_first_left p {
    font-size: 20px;
    margin-top: -3px;
    margin-bottom: 4px;
  }

  .jihua_first_left span {
    font-size: 16px;
    margin-right: 60px;
  }
</style>
